<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="姓氏" prop="surname">
        <el-input
            v-model="queryParams.surname"
            placeholder="请输入姓氏"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="堂号" prop="name">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入堂号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否公开" prop="isOpen">
        <el-select v-model="queryParams.isOpen" placeholder="请选择祠堂是否公开" clearable size="small">
          <el-option
              v-for="dict in dict.type.memorial_hall_open"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="hallList" @selection-change="handleSelectionChange">
      <el-table-column label="祠堂编号" align="center" prop="id"/>
      <el-table-column label="姓氏" align="center" prop="surname"/>
      <el-table-column label="堂号" align="center" prop="name">
        <template slot-scope="scope">
          <span>{{dataFormat(scope.row.name)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="祠堂封面" align="center">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :preview-src-list="scope.row.photoUrl?[baseImageUrl + scope.row.photoUrl]:[]"
                    :src="photoUrl(scope.row.photoUrl)"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="家族祖籍" align="center" prop="address">
        <template slot-scope="scope">
          <span>{{dataFormat(scope.row.address)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否公开" align="center" prop="isOpen">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.memorial_hall_open" :value="scope.row.isOpen"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.memorial_hall_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['service:ancestral-hall:edit']"
          >详情
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-document"
              @click="manage(scope.row)"
              v-hasPermi="['service:ancestral-hall:edit']"
          >资料
          </el-button>
          <el-dropdown trigger="click" @command="verify">
            <span class="el-dropdown-link">
              <i class="el-icon-coordinate">审核</i><i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{row:scope.row,status:1}">通过</el-dropdown-item>
              <el-dropdown-item :command="{row:scope.row,status:-1}">不通过</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 家族祠堂详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" disabled label-width="80px">
        <el-form-item label="姓氏" prop="surname">
          <el-input v-model="form.surname" placeholder="请输入姓氏"/>
        </el-form-item>
        <el-form-item label="堂号" prop="name">
          <el-input v-model="form.name" placeholder="请输入堂号"/>
        </el-form-item>
        <el-form-item label="祠堂封面" prop="photoUrl">
          <image-upload v-model="form.photoUrl" :limit="1" :is-show-tip="false"/>
        </el-form-item>
        <el-form-item label="现居地" prop="provinceName">
          <el-input :value="form.provinceName + form.cityName + form.areaName"/>
        </el-form-item>
        <el-form-item label="家族祖籍" prop="address">
          <el-input v-model="form.address"/>
        </el-form-item>
        <el-form-item label="家族简介" prop="introduction">
          <el-input v-model="form.introduction" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }"
                    placeholder="暂无家族简介"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <manage ref="manage"/>
  </div>
</template>

<script>
  import {listHall, getHall, delHall, addHall, updateHall} from "@/api/service/ancestral-hall";
  import manage from './components/manage';

  export default {
    name: "VerifyAncestralHall",
    dicts: ['memorial_hall_status', 'memorial_hall_open'],
    components: {
      manage
    },
    data() {
      return {
        baseImageUrl: process.env.VUE_APP_BASE_API,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 家族祠堂表格数据
        hallList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          surname: null,
          name: null,
          photoUrl: null,
          introduction: null,
          provinceCode: null,
          provinceName: null,
          cityCode: null,
          cityName: null,
          areaCode: null,
          areaName: null,
          address: null,
          isOpen: null,
          status: 0,
          isDelete: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          surname: [
            {required: true, message: "姓氏不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 祠堂封面地址 */
      photoUrl(photoUrl) {
        return photoUrl ? this.baseImageUrl + photoUrl : require('@/assets/images/default_ancestral_hall.png');
      },
      /** 数据格式化 */
      dataFormat(data) {
        return data ? data : '-'
      },
      /** 查询家族祠堂列表 */
      getList() {
        this.loading = true;
        listHall(this.queryParams).then(response => {
          this.hallList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          surname: null,
          name: null,
          photoUrl: null,
          introduction: null,
          provinceCode: null,
          provinceName: null,
          cityCode: null,
          cityName: null,
          areaCode: null,
          areaName: null,
          address: null,
          isOpen: null,
          status: 0,
          isDelete: null,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加家族祠堂";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getHall(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "家族祠堂详情";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateHall(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addHall(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除家族祠堂编号为"' + ids + '"的数据项？').then(function () {
          return delHall(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('service/hall/export', {
          ...this.queryParams
        }, `hall_${new Date().getTime()}.xlsx`)
      },
      /* 祠堂审核 */
      verify(data) {
        if (data.status === 1) {
          this.$modal.confirm('确定"' + data.row.surname + '氏祠堂"审核通过吗？').then(() => {
            updateHall({id: data.row.id, status: data.status}).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }).catch(() => {
          });
        } else {
          this.$modal.prompt('请输入审核不通过的原因', '请输入审核不通过的原因').then((res) => {
            updateHall({id: data.row.id, status: data.status, verifyMessage: res.value}).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          }).catch(() => {
          });
        }
      },
      /* 资料管理 */
      manage(row) {
        this.$refs.manage.show(row)
      }
    }
  };
</script>
